<template>
  <div id="chartScatter" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
export default {
  data() {
    return {
      chartOption: {
        title: {
          text: '2020年度账号权限管理审计专题每月新增散点图',
          left: 'center'
        },
        xAxis: {},
        yAxis: {},
        tooltip: {},
        legend: {
          data: ['新增量（万）'],
          bottom: 0
        },
        series: [
          {
            name: '新增量（万）',
            symbolSize: 20,
            data: [
              [6.0, 7.24],
              [4.0, 4.26],
              [12.0, 10.84],
              [7.0, 4.82],
              [10.0, 8.04],
              [8.0, 6.95],
              [14.0, 9.96],
              [13.0, 7.58],
              [9.0, 8.81],
              [11.0, 8.33],
              [5.0, 5.68]
            ],
            type: 'scatter'
          }
        ]
      }
    }
  },

  mounted() {
    this.drawLine()
  },

  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('chartScatter'))
      // 绘制图表
      myChart.setOption(this.chartOption)
    }
  }
}
</script>

<style lang="scss" scoped></style>
